// 封装项目轮播图组件
import { Carousel } from 'antd-mobile';

import React, { Component } from 'react';
import propTypes from 'prop-types'
class Swiper extends Component {
    state = {}
    render() {
        return (<div>
            {
                this.props.data.length > 0 &&
                <Carousel
                    autoplay={true}  // 设置自动轮播
                    infinite     // 设置无限轮播                  
                >
                    {this.props.data.map(val => (
                        <a
                            key={val.id}
                            href="http://www.itheima.com"
                            style={{ display: 'inline-block', width: '100%', height: this.props.imgHeight }}
                        >
                            <img
                                src={`https://api-haoke-web.itheima.net${val.imgSrc}`}
                                alt={val.alt}
                                style={{ width: '100%', verticalAlign: 'top' }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                        </a>
                    ))}
                </Carousel>
            }
        </div>);
    }
}

// Swiper 的props中的data和imgHeight属性的合法性检查
Swiper.propTypes = {
    data: propTypes.array.isRequired,   // data属性是一个数组，并且不能为null undefined
    imgHeight: propTypes.number.isRequired// imgHeight属性是一个数字，并且不能为null undefined
}

//  给默认值
Swiper.defaultProps = {
    imgHeight: 176
}

export default Swiper;